import React,{useContext, useEffect} from 'react'
import { useNavigate } from 'react-router';
import {Button,message} from 'antd';
import MicorAppContext from '../../context/micro-app-context'
//import imgSrc from '../../assets/01.jpg';
const imgSrc = require('../../assets/01.jpg');

const MenuIndex = ()=>{
    const micorAppContext:any = useContext(MicorAppContext);
    const navigator = useNavigate();

    const gotoPage = (path:string)=>{
        navigator(path);
    }

    const handleClick = ()=>{
        micorAppContext.setGlobalState({
            from:'subApp',
            message:'hello I am subapp',
            state:{
                name:'subApp',
                age:18,
            }
        });
    }

    return (
        <div>
            <div onClick={gotoPage.bind(null,'/auth/subapp/page-one')}>page 01</div>
            <div onClick={gotoPage.bind(null,'/auth/subapp/page-two')}>page 02</div>
            <div onClick={gotoPage.bind(null,'/auth/subapp/page-three')}>page 03</div>
            <div>
                <Button onClick={handleClick}>发送消息给主应用</Button>
            </div>

            <img src={imgSrc} />
        </div>
    )
}


export default MenuIndex;